<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="yes" name="apple-touch-fullscreen" />
  <meta content="telephone=no,email=no" name="format-detection" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>声撩好友召集</title>
  <link rel="stylesheet" href="./css/share.css" />
  <script src="./js/vue.js"></script>
  <script src="./js/flex.js"></script>
</head>
<body>
  <div id="app" @click="download()">
    <div class="background-image" style="background-color: #333; height: 100vh;display: none;">
      <img width="100%"
           src="https://img.alicdn.com/imgextra/i4/668603298/TB2ZuSVgQKWBuNjy1zjXXcOypXa_!!2-martrix_bbs.png">
    </div>
    <div id="main">
      <!-- <img src="./images/sharebg@2x.png" height="100%" alt=""> -->
      <div class="user">
        <div class="headimg">
          <!-- <img :src="user.portrait" width="100%" alt=""> -->
        </div>
        <!-- <p class="nickname">{{ user.nickname }}</p> -->
        <div class="msg">这里有高颜值小哥哥，小姐姐陪玩等你，可以秀才艺得收益，和同好朋友嗨不停</div>
      </div>
  
      <div class="item">
        <div class="item-headimg">
          <img src="./images/1-2.jpeg" width="100%" alt="">
        </div>
        <div class="item-user">
          <p class="item-nickname">Yu-冉冉</p>
          <p class="item-desc">爱到最后是成全</p>
          <div class="item-btn-group">
            <div class="item-btn1"></div>
            <div class="item-btn2"></div>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="item-headimg">
          <img src="./images/1-3.jpeg" width="100%" alt="">
        </div>
        <div class="item-user">
          <p class="item-nickname">杨清</p>
          <p class="item-desc">一颗滚热的灵魂</p>
          <div class="item-btn-group">
            <div class="item-btn1"></div>
            <div class="item-btn2"></div>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="item-headimg">
          <img src="./images/1-1.jpeg" width="100%" alt="">
        </div>
        <div class="item-user">
          <p class="item-nickname">超乖、</p>
          <p class="item-desc">最好是坏尝了才知道</p>
          <div class="item-btn-group">
            <div class="item-btn1"></div>
            <div class="item-btn2"></div>
          </div>
        </div>
      </div>
  
      <div class="btn">
        <p class="btn-text" @click="download()">撩一撩</p>
      </div>
    </div>
  
    <!-- 输入手机号遮罩层 -->
    <div v-show="dialogShow" id="phone-dialog">
      <p class="phone-desc">输入手机号,立即约玩"Ta"~</p>
      <input v-model="form.phone" class="phone-input" type="text" @input="checkPhone()">
      <div :class="[{ 'liao-btn-no': canSubmit }, 'liao-btn']" @click.stop="canSubmit ? bindPhone() : ''">
        去APP撩一下
      </div>
    </div>
    <!-- end -->
  
    <!-- 遮罩层 -->
    <div v-show="overlayShow" class="overlay" @click.stop="closeAllDialog()"></div>
    <!-- end -->

    <!-- 活动结束弹窗 -->
    <div id="over-dialog" v-show="canShowTip">
      <div class="close" @click="canShowTip = false"></div>
      <p>{{ msg }}</p>
      <div class="btn" @click=" canShowTip = false">
        知道啦
      </div>
    </div>
    <!-- end -->
  </div>
</body>
<script src="./js/tool.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    overlayShow: false,
    dialogShow: false,
    canShowTip: false,
    baseUrl: '',
    apiUrl: '',
    user: {
      nickname: '',
      portrait: ''
    },
    form: {
      code: '',
      phone: ''
    },
    msg: '',
    redirect_url: "",
    canSubmit: false
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let _this = this
      try{
        _this.form.code = kk.$_GET['code']
        kk.env = 'dev'
        kk.ajaxGet("./config.json", {}, function(res) {
          let {devUrl, proUrl, localUrl, env, apiUrl} = res
          kk.env = env
          _this.apiUrl = apiUrl
          if(env === "dev") {
            _this.baseUrl = devUrl
          } else if(env === "production"){
            _this.baseUrl = proUrl
          } else if(env === "local") {
            _this.baseUrl = localUrl
          }
          // _this.baseUrl = localUrl
        _this.getUserInfo()
      })
      }catch(error) {
        console.error(error)
      }
    },
    resetForm() {
      this.form = {
        code: '',
        phone: ''
      }
    },
    showDialog(state) {
      this.overlayShow = state
      this.dialogShow = state
    },
    showTip(state) {
      this.overlayShow = state
      this.canShowTip = state
    },
    closeAllDialog() {
      this.overlayShow = false
      this.dialogShow = false
      this.canShowTip = false
      this.resetForm()
    },
    getUserInfo(){
      let _this = this
      kk.ajaxGet(_this.baseUrl + "/convene/invite/info/" + _this.form.code, {}, function(res) {
        let { code, data } = res
        if(code === 200){
          _this.user = Object.assign( {}, { nickname: data.nickname, portrait: data.portrait })
        }
      });
    },
    bindPhone() {
      let _this = this
      _this.form.code = kk.$_GET['code']
      kk.ajaxPost(_this.baseUrl + "/convene/create", _this.form, function(res){
        let { code, message } = res
        if(code === 200){
          _this.msg = message
          _this.showDialog(false)
          window.location.href = _this.redirect_url
        } else {
          _this.msg = message
          _this.showTip(true)
          kk.H5toApp()
        }
      })
    },
    download() {
      if (/(iPhone|iPad|iPod|iOS)/i.test( navigator.userAgent)) {
          // this.redirect_url = "http://fir.kekestar.cn/j6fd"
          this.redirect_url = "https://apps.apple.com/cn/app/id1537978739"
          this.showDialog(true)
      } else {
          if (navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1) {
              document.getElementById("main").style.display = "none"
              document.getElementsByClassName("background-image")[0].style.display = "block"
          }else{
            this.redirect_url = "https://ztaudio-api.kekestar.cn/system/version/get?channel_id=600000"
            this.showDialog(true)
          }
      }
    },
    checkPhone() {
      let _this = this
      if(!(/^1[3456789]\d{9}$/.test(this.form.phone))){ 
        _this.canSubmit = false
      }  else {
        _this.canSubmit = true
      }
    }
  }
})
</script>
</html>